<template>
  <div>
    <div
      v-if="
        detail.competite_activity_check?.length ||
        detail.competite_activity_review_score?.length
      "
      class="detail"
    >
      <div class="listWrap">
        <div
          class="item"
          v-for="item in detail.competite_activity_review_score"
          @click="gotoDetail(item, 'score')"
          :key="item.id"
        >
          <img class="icon" src="./s.png" alt="" />
          <img class="b" src="./b.png" alt="" />
          <span class="num">{{ item.count }}<span class="t">个</span></span>
          <span class="title"
            >《{{ item.title }}》有待<span class="hl">打分</span>作品</span
          >
        </div>
      </div>
      <div class="listWrap">
        <div
          class="item"
          v-for="item in detail.competite_activity_check"
          @click="gotoDetail(item, 'check')"
          :key="item.id"
        >
          <img class="icon" src="./c.png" alt="" />
          <img class="b" src="./b.png" alt="" />
          <span class="num">{{ item.count }}<span class="t">个</span></span>
          <span class="title"
            >《{{ item.title }}》有待<span class="hl" style="color: #df5146"
              >审核</span
            >作品</span
          >
        </div>
      </div>
    </div>
    <div
      v-else
      style="
        background-color: white;
        text-align: center;
        height: 80.5vh;
        width: 98%;
      "
      class="addrescals2s"
    >
      <img class="sfasf" src="../../../assets/img_welcome.png" alt="" />
      <div class="title">欢迎使用资源管理平台!</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "welcome",
  data() {
    return {
      detail: {
        competite_activity_check: [],
        competite_activity_review_score: [],
      },
    };
  },
  created() {
    this.setPageTabs();
    this.getData();
  },
  methods: {
    async gotoDetail(item, type) {
      const { con_id } = item;
      let id = "";
      if (type === "score") {
        try {
          let res = await this.request({
            url: "/admin/competiteActivityWorks/getNextUnScoreed",
            data: { con_id },
            method: "get",
          });
          id = res.content.id;
        } catch (err) {
          let error = err.message.split("/");
          if (+error[0] !== 203) {
            this.errorHandler(err);
          } else {
            this.$message.warning("您已经打分完所有作品");
          }
        }
      }
      if (type === "check") {
        try {
          let res = await this.request({
            url: "/admin/competiteActivityWorks/getNextUnchecked",
            data: { con_id },
            method: "get",
          });
          id = res.content.id;
        } catch (err) {
          let error = err.message.split("/");
          if (+error[0] !== 203) {
            this.errorHandler(err);
          } else {
            this.$message.warning("您已经审核完所有作品");
          }
        }
      }
      if (!id) return;
      this.$router.push({
        path: "/CompetitionManagement2/megagameList/management/entry/info",
        query: {
          t: "continuous",
          tt: type,
          con_id,
          id,
        },
      });
    },

    async getData() {
      return
      try {
        let res = await this.request({
          url: "/admin/index/index",
          method: "get",
          data: {},
        });
        this.detail = res.content;
      } catch (err) {
        this.errorHandler(err);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.addrescals2s {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .title {
    font-size: 30px;
    font-weight: 400;
    color: $themeColorbackA;
    line-height: 20px;
    margin-top: 10px;
  }
  .sfasf {
    width: 500px;
    height: 360px;
  }
}

/*  */

.detail {
  box-sizing: border-box;
  padding: 40px;
  padding-right: 20px;
}
.listWrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  .item {
    width: 344px;
    height: 188px;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: flex-start;
    padding: 0 30px;
    cursor: pointer;
    &:nth-child(4n + 1) {
      background: #00a9b0;
    }
    &:nth-child(4n + 2) {
      background: #67ccf2;
    }
    &:nth-child(4n + 3) {
      background: #64d1c6;
    }
    &:nth-child(4n + 4) {
      background: #7c8af8;
    }
    .b {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 0;
    }
    .icon {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 4;
      width: 100px;
      height: 100px;
    }
    .num {
      height: 67px;
      font-size: 50px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      text-align: left;
      color: #ffffff;
      line-height: 67px;
      margin-top: 30px;
      margin-bottom: 8px;
      vertical-align: bottom;
      .t {
        font-size: 20px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 67px;
        margin-left: 4px;
      }
    }
    .title {
      font-size: 20px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: left;
      color: #ffffff;
      line-height: 26px;
      .hl {
        color: #ffc95e;
        font-weight: bold;
      }
    }
  }
}
</style>
